<script setup lang="ts">
import { ref, onMounted, h } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getIpDetail } from "../work-order/servers";
import {
  ElCard,
  ElTag,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElMessage,
  ElAlert,
  ElDivider,
  ElProgress,
  ElDescriptions,
  ElDescriptionsItem,
  ElButton,
} from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const ipParam = ref((route.query.ip as string) || "");

interface IpDetailData {
  summary: any;
  asset_info: any;
  scan_details: any;
  compliance_analysis: any;
  location_diff: any;
  high_risk_analysis: any;
  vulnerabilities: any;
}

const detailData = ref<IpDetailData>({
  summary: {},
  asset_info: {},
  scan_details: {},
  compliance_analysis: {},
  location_diff: {},
  high_risk_analysis: {},
  vulnerabilities: {},
});

// 获取IP详情
const fetchIpDetail = async () => {
  if (!ipParam.value) {
    ElMessage.error("IP地址不能为空");
    router.back();
    return;
  }

  loading.value = true;
  try {
    const res = await getIpDetail({ ip: ipParam.value });
    if (res.code === 2000) {
      detailData.value = res.data;
    } else {
      ElMessage.error(res.message || "获取IP详情失败");
    }
  } catch (error) {
    console.error("获取IP详情失败:", error);
    ElMessage.error("获取IP详情失败");
  } finally {
    loading.value = false;
  }
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 风险等级颜色映射
const riskLevelMap = {
  safe: { color: "#52c41a", text: "安全" },
  low: { color: "#faad14", text: "低危" },
  medium: { color: "#ff8c00", text: "中危" },
  high: { color: "#ff4d4f", text: "高危" },
};

// 合规状态颜色映射
const complianceStatusMap = {
  consistent: { color: "#52c41a", text: "一致" },
  unreported: { color: "#fa8c16", text: "未报备" },
  suspected: { color: "#f5222d", text: "可疑" },
};

// 漏洞等级颜色映射
const vulnLevelMap = {
  critical: { color: "#8B0000", text: "严重" },
  high: { color: "#FF0000", text: "高危" },
  medium: { color: "#FF8C00", text: "中危" },
  low: { color: "#FFD700", text: "低危" },
  info: { color: "#1890FF", text: "信息" },
};

onMounted(() => {
  fetchIpDetail();
});
</script>

<template>
  <div v-loading="loading" class="ip-detail-page">
    <!-- 顶部操作栏 -->
    <el-card shadow="never" class="header-card">
      <div class="header-content">
        <div class="ip-title">
          <el-button @click="handleBack" circle>
            <el-icon><ArrowLeft /></el-icon>
          </el-button>
          <h2>IP详情: {{ ipParam }}</h2>
        </div>
      </div>
    </el-card>

    <!-- 汇总摘要卡片 -->
    <el-card shadow="never" class="summary-card">
      <template #header>
        <span class="card-title">汇总摘要</span>
      </template>
      <div class="summary-grid">
        <div class="summary-item">
          <div class="summary-label">风险等级</div>
          <div class="summary-value">
            <el-tag
              :type="riskLevelMap[detailData.summary?.risk_level]?.color"
              effect="dark"
            >
              {{ riskLevelMap[detailData.summary?.risk_level]?.text }}
            </el-tag>
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-label">端口总数</div>
          <div class="summary-value">
            {{ detailData.summary?.total_ports || 0 }}
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-label">高危端口</div>
          <div class="summary-value danger">
            {{ detailData.summary?.high_risk_ports || 0 }}
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-label">合规状态</div>
          <div class="summary-value">
            <el-tag
              :type="
                complianceStatusMap[detailData.summary?.compliance_status]
                  ?.color
              "
              effect="dark"
            >
              {{
                complianceStatusMap[detailData.summary?.compliance_status]?.text
              }}
            </el-tag>
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-label">漏洞总数</div>
          <div class="summary-value">
            {{ detailData.summary?.total_vulnerabilities || 0 }}
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-label">严重漏洞</div>
          <div class="summary-value danger">
            {{ detailData.summary?.critical_vulnerabilities || 0 }}
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-label">高危漏洞</div>
          <div class="summary-value warning">
            {{ detailData.summary?.high_vulnerabilities || 0 }}
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-label">最后扫描时间</div>
          <div class="summary-value">
            {{ detailData.summary?.last_scan_time || "-" }}
          </div>
        </div>
      </div>
    </el-card>

    <!-- 基础资产信息 -->
    <el-card shadow="never" class="mt-4">
      <template #header>
        <span class="card-title">基础资产信息</span>
      </template>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="所属部门">
          {{ detailData.asset_info?.department || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ detailData.asset_info?.contact_person || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="资产类型">
          {{ detailData.asset_info?.asset_type || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="资产名称">
          {{ detailData.asset_info?.asset_name || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="服务类型">
          {{ detailData.asset_info?.service_type || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="是否有Web界面">
          <el-tag
            :type="
              detailData.asset_info?.has_web_interface ? 'success' : 'info'
            "
          >
            {{ detailData.asset_info?.has_web_interface ? "是" : "否" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否跨部门">
          <el-tag
            :type="
              detailData.asset_info?.is_cross_department ? 'warning' : 'info'
            "
          >
            {{ detailData.asset_info?.is_cross_department ? "是" : "否" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="端口范围" :span="2">
          {{ detailData.asset_info?.port_ranges || "-" }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 高危端口警告 -->
    <el-card
      v-if="detailData.high_risk_analysis?.has_high_risk"
      shadow="never"
      class="mt-4 danger-card"
    >
      <el-alert title="检测到高危端口" type="error" :closable="false" show-icon>
        <template #default>
          <div
            v-for="(port, index) in detailData.high_risk_analysis
              ?.high_risk_ports"
            :key="index"
          >
            <p>
              <strong>端口 {{ port.port }} ({{ port.service }})</strong> -
              风险等级: {{ port.risk_level }} - {{ port.risk_reason }}
            </p>
          </div>
        </template>
      </el-alert>
    </el-card>

    <!-- 漏洞分析 -->
    <el-card
      v-if="detailData.vulnerabilities?.summary"
      shadow="never"
      class="mt-4"
    >
      <template #header>
        <span class="card-title">漏洞分析</span>
      </template>

      <!-- 漏洞统计 -->
      <div class="vuln-summary">
        <div class="vuln-stat-item">
          <div class="stat-number critical">
            {{ detailData.vulnerabilities.summary?.critical_count || 0 }}
          </div>
          <div class="stat-label">严重</div>
        </div>
        <div class="vuln-stat-item">
          <div class="stat-number high">
            {{ detailData.vulnerabilities.summary?.high_count || 0 }}
          </div>
          <div class="stat-label">高危</div>
        </div>
        <div class="vuln-stat-item">
          <div class="stat-number medium">
            {{ detailData.vulnerabilities.summary?.medium_count || 0 }}
          </div>
          <div class="stat-label">中危</div>
        </div>
        <div class="vuln-stat-item">
          <div class="stat-number low">
            {{ detailData.vulnerabilities.summary?.low_count || 0 }}
          </div>
          <div class="stat-label">低危</div>
        </div>
        <div class="vuln-stat-item">
          <div class="stat-number info">
            {{ detailData.vulnerabilities.summary?.info_count || 0 }}
          </div>
          <div class="stat-label">信息</div>
        </div>
      </div>

      <el-divider />

      <!-- 漏洞列表 -->
      <el-tabs type="border-card">
        <!-- 严重漏洞 -->
        <el-tab-pane
          v-if="detailData.vulnerabilities.details?.critical?.length"
          label="严重漏洞"
        >
          <div
            v-for="(vuln, index) in detailData.vulnerabilities.details.critical"
            :key="index"
            class="vuln-item"
          >
            <div class="vuln-header">
              <strong>{{ vuln.vulnerability_name }}</strong>
              <el-tag type="danger">{{ vuln.level }}</el-tag>
              <el-tag size="small">{{ vuln.cve_id }}</el-tag>
              <el-tag size="small" type="info">端口: {{ vuln.port }}</el-tag>
            </div>
            <div class="vuln-content">
              <p><strong>描述:</strong> {{ vuln.description }}</p>
              <p><strong>CVSS评分:</strong> {{ vuln.cvss_score }} / 10</p>
              <p><strong>修复建议:</strong></p>
              <pre>{{ vuln.fix_suggestion }}</pre>
            </div>
          </div>
        </el-tab-pane>

        <!-- 高危漏洞 -->
        <el-tab-pane
          v-if="detailData.vulnerabilities.details?.high?.length"
          label="高危漏洞"
        >
          <div
            v-for="(vuln, index) in detailData.vulnerabilities.details.high"
            :key="index"
            class="vuln-item"
          >
            <div class="vuln-header">
              <strong>{{ vuln.vulnerability_name }}</strong>
              <el-tag type="danger">{{ vuln.level }}</el-tag>
              <el-tag size="small">{{ vuln.cve_id }}</el-tag>
            </div>
            <div class="vuln-content">
              <p><strong>描述:</strong> {{ vuln.description }}</p>
              <p><strong>CVSS评分:</strong> {{ vuln.cvss_score }} / 10</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 扫描结果 -->
    <el-card shadow="never" class="mt-4">
      <template #header>
        <span class="card-title">扫描结果</span>
      </template>
      <el-tabs>
        <el-tab-pane label="本地扫描">
          <el-table :data="detailData.scan_details?.local || []" border>
            <el-table-column prop="port" label="端口" width="80" />
            <el-table-column prop="service" label="服务" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="status" label="状态码" width="100" />
            <el-table-column prop="url" label="URL" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="异地扫描">
          <el-table :data="detailData.scan_details?.remote || []" border>
            <el-table-column prop="port" label="端口" width="80" />
            <el-table-column prop="service" label="服务" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="status" label="状态码" width="100" />
            <el-table-column prop="url" label="URL" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 更多内容可以继续添加 -->
  </div>
</template>

<style lang="scss" scoped>
.ip-detail-page {
  padding: 16px;
}

.header-card {
  margin-bottom: 16px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ip-title {
  display: flex;
  align-items: center;
  gap: 12px;

  h2 {
    margin: 0;
    font-size: 18px;
  }
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

.summary-card {
  .summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .summary-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .summary-label {
    font-size: 14px;
    color: #606266;
  }

  .summary-value {
    font-size: 20px;
    font-weight: 600;

    &.danger {
      color: #ff4d4f;
    }

    &.warning {
      color: #fa8c16;
    }
  }
}

.danger-card {
  border-left: 4px solid #f5222d;
}

.vuln-summary {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.vuln-stat-item {
  text-align: center;

  .stat-number {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 8px;

    &.critical {
      color: #8b0000;
    }

    &.high {
      color: #ff0000;
    }

    &.medium {
      color: #ff8c00;
    }

    &.low {
      color: #ffd700;
    }

    &.info {
      color: #1890ff;
    }
  }

  .stat-label {
    font-size: 14px;
    color: #606266;
  }
}

.vuln-item {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #f5222d;
}

.vuln-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 16px;

  strong {
    flex: 1;
  }
}

.vuln-content {
  p {
    margin: 8px 0;
    line-height: 1.6;
  }

  pre {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

.mt-4 {
  margin-top: 16px;
}
</style>
